<template>
  <el-dialog custom-class="wrapper-folder" v-model="isShow" @close="handleClose" @open="handleOpen">
    <Folder ref="folder" />  
    <div class="folder-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleFolder">确定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {
  defineComponent,
} from 'vue';

import Folder from './Folder.vue';

export default defineComponent({
  name: 'WrapperFolder',
  components: {
    Folder
  },
  props: {
    
  },
  
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    handleClose() {
      this.isShow = false;
    },
    handleOpen() {
      this.isShow = true;
    },
    handleFolder() {
      this.$refs.folder.handleValidate(valid => {
        if (valid) {
          console.log('route', this.$route.path.split('/').slice(2))
          const p = this.$route.path.split('/').slice(2);
          const bucketName = p.shift(), folderName = p.join('/');
          console.log('bucketName', bucketName);
          console.log('folderName', folderName);
          this.$http.post('/bff/imagepic/object/putFolder', {
            'authorization': sessionStorage.getItem('token'),
            'bucket': bucketName,
            'folder': folderName ? folderName + '/' + this.$refs.folder.ruleForm.folderName : this.$refs.folder.ruleForm.folderName,
            'key': this.$store.state.key
          }).then(res => {
            if(res.data.success) {
              this.$message.success('新增文件夹成功')
              this.$router.go(0);
            } else {
              this.$message.error('新增文件夹失败')
              setTimeout(() => {
                this.$router.go(0);
              }, 1000);
            }
          })
        } else {
          return false
        }
      })
    }
  },
})
</script>

<style lang="scss">
.wrapper-folder {
  .folder-footer {
    display: flex;
    justify-content: right;
  }
}
</style>